<template>
  <!-- 地块信息 制作时间：2024-3-12 -->
  <div class="agriMonitoring" v-if="tableData && tableData.length">
    <div class="routeName">{{ $route.name }}</div>
    <div>
      <!-- <div class="searchBox">
        <div>
            <el-input
              class="searchInp"
              v-model="params.id"
              placeholder="搜索编号"
            ></el-input>
            <el-button
              class="searchBtn"
              type="primary"
              @click="search()"
              >搜 索</el-button
            >
        </div>
        <el-button type="primary" class="addBtn" @click="addTracebility()">
            <i class="el-icon-plus"></i>
            创建溯源码
        </el-button>
      </div> -->
      <div class="searchBox">
        <div>
          <el-input
            class="searchInp greyBackground"
            v-model="params.id"
            size="small"
            @input="search()"
            placeholder="搜索编号"
            suffix-icon="el-icon-search"
          ></el-input>
        </div>
        <div>
          <!-- <el-button
            class="searchBtn"
            type="primary"
            icon="el-icon-search"
            @click="search()"
            >查 询</el-button
          > -->
          <el-button type="primary" size="small" class="addBtn greenBtn" @click="addTracebility()">
           生成溯源码
          </el-button>
        </div>
      </div>
      <div class="tableList">
        <el-table
          class="list tableNewBox"
          :data="tableData"
          style="width: 100%"
        >
          <el-table-column label="溯源码" >
            <template slot-scope="scope">
              <div
                class="scanListText"
                @mousemove="getMouse($event, nowLink = scope.row.link, numId=scope.row.id)"
                @mouseleave="nowLink = null,numId=null, showBoxName = false"
              >
                <div class="scanTitle">食品安全看得见</div>
                <div class="scanImage">
                  <img src="@/assets/img/leftStar.png" class="scanStar"/>
                  <img class="scan" :src="!scope.row.link ? require('@/assets/img/scan.png') : scope.row.link" />
                  <!-- <el-image
                    class="scan"
                    :src="scope.row.link ? scope.row.link : require('@/assets/img/scan.png')"
                    >
                  </el-image> -->
                  <img src="@/assets/img/rightStar.png" class="scanStar"/>
                </div>
                <div class="scanBottom">溯源编码：<span class="greenColor">{{ scope.row.id ? scope.row.id : '编号自动生成'}}</span></div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="溯源码编号">
            <template slot-scope="scope">
              <span>{{ scope.row.id }}</span>
            </template>
          </el-table-column>
          <el-table-column label="创建时间">
            <template slot-scope="scope">
              <span>{{ $moment(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="溯源绑定">
            <template slot-scope="scope">
              <span :class="!scope.row.link ? 'redColor' : 'greenColor'">{{ scope.row.link ? '已绑定' : '未绑定' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="浏览量">
            <template slot-scope="scope">
              {{ scope.row.count ? scope.row.count : 0 }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="220" header-align="center" align="center">
            <template slot-scope="scope">
              <el-button
                  size="mini"
                  type="text"
                  class="greenButton"
                  icon="el-icon-view"
                  @click="openDetail(scope.row, 1)"
              >
                  查看
              </el-button>
              <el-button
                  size="mini"
                  type="text"
                  class="greenButton"
                  icon="el-icon-printer"
                  @click="openDetail(scope.row, 2)"
              >
                  打印
              </el-button>
              <el-button
                size="mini"
                class="redButton"
                icon="el-icon-delete"
                type="text"
                @click="delBtn(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="pagination">
      <el-pagination
        background
        @current-change="handleCurrentChange"
        :current-page.sync="params.current"
        :page-size="params.size"
        layout="prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <el-dialog
      :title="''"
      :visible.sync="dialogVisible"
      width="400px"
      :before-close="()=> { dialogVisible = false }"
      append-to-body
      class="dialog dialogPrint"
    >
      <div class="prntTitle">溯源码已生成</div>
      <div class="prntTitle">使用手机扫描进行查看</div>
      <div class="scanBox">
        <!-- <img src="@/assets/img/line.png" class="line"/>
        <img src="@/assets/img/horizontal.png" class="horizontal"/>
        <span class="lineText">5cm</span>
        <span class="horizontalText">5cm</span> -->
        <div id="exportContainer">
          <div class="scanTitle">食品安全看得见</div>
          <div class="scanImage">
            <img src="@/assets/img/leftStar.png" class="scanStar"/>
            <img :src="!form.link ? require('@/assets/img/scan.png') : form.link" class="scan"/>
            <img src="@/assets/img/rightStar.png" class="scanStar"/>
          </div>
          <div class="scanBottom">溯源编码：<span class="greenColor">{{ form.id ? form.id : '编号自动生成'}}</span></div>
        </div>
      </div>
    </el-dialog>
    <div id="boxName" v-if="showBoxName">
      <div class="scanTitle">食品安全看得见</div>
      <div class="scanImage">
        <img src="@/assets/img/leftStar.png" class="scanStar"/>
        <img :src="!nowLink ? require('@/assets/img/scan.png') : nowLink" class="scan"/>
        <img src="@/assets/img/rightStar.png" class="scanStar"/>
      </div>
      <div class="scanBottom">溯源编码：<span class="greenColor">{{ numId ? numId : '编号自动生成'}}</span></div>
    </div>
  </div>
  <createdText v-else />
</template>

<script>
import { getTracingListApi, deleteTracing } from '@/api/baseInfo'
import { getSysSonDictListApi } from '@/api/dict'
import loadImage from '@/mxins/loadMixins'
import createdText from './createdText'
export default {
  name: 'traceability',
  mixins: [loadImage],
  components: {
    createdText
  },
  data () {
    return {
      dialogVisible: false,
      params: {
        id: null,
        size: 4,
        current: 1
      },
      form: {
        id: null,
        link: null
      },
      tableData: [],
      plantingVarietys: null,
      landTypes: null,
      landStates: [
        { value: '空闲中', label: 0 },
        { value: '种植中', label: 1 }
      ],
      valueArea: '',
      total: null,
      showBoxName: false,
      nowLink: '',
      numId: ''
    }
  },
  mounted () {
    this.params.baseId = this.$store.getters.userInfo.baseId
    this.getList()
  },

  methods: {
    // 鼠标滑过
    getMouse (event) {
      this.$nextTick(() => {
        const box = document.getElementById('boxName')
        this.showBoxName = true
        if (event.offsetX <= 0 || event.offsetY <= 0) {
          this.showBoxName = false
          return
        }
        const left = event.pageX
        const top = event.pageY
        // pageX和page这两个属性在IE8中不支持，所以如果需要兼容IE8，就不能使用
        // 设置div的偏移量
        box.style.left = left + 'px'
        box.style.top = top + 20 + 'px'
      })
    },
    // 创建溯源码
    addTracebility () {
      this.$router.push({ path: '/centerindustry/traceability/bind' })
    },
    // 列表查询
    async getList () {
      const res = await getTracingListApi(this.params)
      this.tableData = res.data.records
      this.total = res.data.total
    },
    addLand () {
      this.$router.push({
        path: '/centerindustry/agriAreaAdd'
      })
    },
    // 字典
    async getSysSonDictList () {
      // 种植种类
      const res1 = await getSysSonDictListApi('ZZZL')
      // console.log(res1.data)
      this.plantingVarietys = res1.data
      // 地块类型
      const res2 = await getSysSonDictListApi('DKLX')
      // console.log(res2.data)
      this.landTypes = res2.data
    },
    // 删除按钮
    async delBtn (content) {
      // 计划删除
      await this.$confirm(
        `<span class="mrGrey">${content.fState === 1 ? '如需删除，请先将已绑定的溯源码解绑。' : `请确认删除溯源码 ${content.id}`}<span>`,
        content.fState === 1 ? '有溯源码已绑定溯源信息，无法删除。' : '是否删除溯源信息？',
        {
          dangerouslyUseHTMLString: true,
          confirmButtonText: '删除',
          showConfirmButton: content.fState !== 1,
          cancelButtonText: '关闭',
          type: 'warning'
        })
      deleteTracing({ ids: content.id }).then(res => {
        if (res.code === 200) {
          this.$message.success('删除成功')
          this.params.current = 1
          this.getList()
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    // 查询
    search () {
      this.params.current = 1
      this.getList()
    },
    // 查看详情
    openDetail (content, printing) {
      if (printing === 2) {
        this.form = content
        this.dialogVisible = true
        return
      }
      this.$router.push({
        path: '/centerindustry/traceability/bind',
        query: {
          id: content.id,
          printing: printing
        }
      })
    },
    // openDetail (landObj) {
    //   this.$router.push({
    //     path: '/centerindustry/agriLandDetail',
    //     query: {
    //       landId: 123
    //     }
    //   })
    //   this.$store.dispatch('mission/updateLandDetail', landObj)
    // },
    // 翻页
    handleCurrentChange (val) {
      this.params.current = val
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
.redColor {
    color: #F76560
}
.greenColor {
    color: #19B560
}
.elImage {
    width: 1.2rem;
    height: 1.2rem
}
.agriMonitoring {
  width: 100%;
  height: 100%;
  position: relative;
  // background-color: #fff;
  .searchBox {
    font-weight: 600;
    margin-bottom: 1.5vh;
    width: 100%;
    height: 11vh;
    line-height: 11vh;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .searchInp {
      width: 16.4708vw;
      height: 0.75rem * 0.834;
      margin-right: 1vw;
    }
    .searchBtn {
      background-color: #6adfae;
      border: #80efb1;
      font-weight: 600;
      width: 5.8333vw;
      height: 3.125vw * 0.834;
    }
    .searchBtn:hover {
      background-color: #80efb1;
    }
  }
  .tableList {
    height: 63vh;
    overflow-y: auto;
    border-radius: 20px;
    background: #fff;
    padding:  0 0 1.0417vw 0;
    .addBtn {
      margin-bottom: 1.5625vw * 0.834;
    }
    .list {
      text-align: center;
    }
  }
  .pagination {
    margin-top: 1.5625vw *0.834;
    text-align: right;
  }
}
.scanTitle {
  text-align: center;
  padding: 20px 0 15px 0;
  background: #fff;
  font-weight: bold;
  color: #333;
}
.scanBottom {
  text-align: center;
  font-size: 14px;
  font-weight: bold;
}
.scanImage {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .scan {
    width: 135px;
    height: 135px;
  }
  .scanStar {
    width: 45px;
  }
  ::v-deep #canvas {
    text-align: center;
    img {
      width: 150px;
      height: 150px;
      margin: auto
    }
  }
}
.scanListText {
  font-size: 0.08rem;
  -webkit-text-size-adjust: none;
  text-align: center;
  width: 65px;
  height: 65px;
  padding: 5px;
  border: 1px solid #19B560;
  .scanTitle {
    padding: 4px 0;
    line-height: 1;
    background: unset;
  }
  .scan {
    width: 30px;
    height: 30px;
  }
  .scanStar {
    width: 6px;
  }
  .scanBottom {
    line-height: 1;
    padding-top: 5px;
    font-size: 0.06rem;
  }
}
.dialogPrint {
  ::v-deep .el-dialog {
    border-radius: 0.2rem !important;
    margin-top: 9vh !important;
    .scanBox {
      width: 250px;
      height: 250px;
      background: #fff;
      font-size: 22px;
      position: relative;
      border: 6px solid #00C586;
      margin: auto;
      > div {
        padding: 0 0.3rem;
      }
      .line {
        position: absolute;
        right: -0.32rem;
        top: 0;
        height: 100%;
      }
      .horizontal {
        position: absolute;
        left: 0;
        bottom: -0.35rem;
        width: 100%;
      }
      .lineText {
        position: absolute;
        right: -0.53rem;
        top: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        margin: auto;
        color: #19B560;
        font-size: 0.15rem
      }
      .horizontalText {
        position: absolute;
        left: 0;
        right: 0;
        margin: auto;
        text-align: center;
        bottom: -0.48rem;
        width: 100%;
        color: #19B560;
        font-size: 0.15rem
      }
    }
    .el-dialog__title {
      padding: 0 0.5208vw;
      font-weight: 500;
      border-left: none
    }
    .el-icon-close {
      font-size: 24px;
    }
    .el-dialog__body {
      padding: 0 20px 50px 20px;
    }
    .prntTitle {
      color: #333333;
      font-size: 18px;
      line-height: 28px;
      text-align: center;
    }
    .prntTitle+.prntTitle {
      margin-bottom: 20px;
    }
  }
}
.greenbutton {
  background: #19B560;
  border: 1px solid #19B560;
  color: #fff;
  padding: 0.12rem 0.35rem;
  margin: 0.2rem 0 0 0.3rem
}
.greybutton {
  background: #CCCCCC;
  border: 1px solid #CCCCCC;
  color: #fff;
  padding: 0.12rem 0.35rem;
  margin: 0.2rem 0 0 0.3rem
}
#boxName {
  position: fixed;
  z-index: 99999;
  background: #fff;
  box-shadow: 0 0 4px 0 rgba(0,0,0, 0.1);
  .scanTitle {
    padding: 15px 0 10px 0;
    font-weight: bold;
  }
  .scanStar {
    width: 40px;
  }
  .scanBottom {
    padding: 0 0 10px 0;
  }
}
</style>
